<template>
  <div class="Dingdan">
    <!-- 头部区域 -->
    <div class="top">
      <el-input
        placeholder="请输入货物名称"
        prefix-icon="el-icon-search"
        v-model="input2"
        @input="myCheck()"
      >
      </el-input>
      <el-button type="primary" icon="el-icon-search" @click="Click()"
        >搜索</el-button
      >
    </div>

    <el-button id="add" type="primary" @click="dialogFormVisible = true"
      >添加订单</el-button
    >

    <!-- 添加订单操作表格 -->
    <el-dialog title="订单信息" :visible.sync="dialogFormVisible">
      <el-form :model="Userform" ref="userForm">
        <el-form-item label="订单名称" label-width="100px">
          <el-input v-model="Userform.name"></el-input>
        </el-form-item>
        <el-form-item label="订单种类" label-width="100px">
          <el-input v-model="Userform.class"></el-input>
        </el-form-item>
        <el-form-item label="订单价格" label-width="100px">
          <el-input v-model="Userform.price"></el-input>
        </el-form-item>
        <el-form-item label="订单数量" label-width="100px">
          <el-input v-model="Userform.num"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="check(Userform)">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 编辑表格数据隐藏dialog -->
    <el-dialog title="订单信息" :visible.sync="dialogFormVisible2">
      <el-form :model="table" ref="userForm2">
        <el-form-item label="订单编号" label-width="100px">
          <el-input v-model="table._id" readonly="readonly"></el-input>
        </el-form-item>
        <el-form-item label="订单名称" label-width="100px">
          <el-input v-model="table.name" readonly="readonly"></el-input>
        </el-form-item>
        <el-form-item label="订单种类" label-width="100px">
          <el-input v-model="table.class" readonly="readonly"></el-input>
        </el-form-item>
        <el-form-item label="订单价格" label-width="100px">
          <el-input v-model="table.price"></el-input>
        </el-form-item>
        <el-form-item label="订单数量" label-width="100px">
          <el-input v-model="table.num"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible2 = false">取 消</el-button>
        <el-button type="primary" @click="checked(table)">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 主订单数据 -->
    <div class="down">
      <el-table :data="tableDate" height="570" border style="width: 100%">
        <el-table-column
          prop="_id"
          label="订单编号"
          width="220"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="name"
          label="订单名称"
          width="220"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="class"
          label="货物种类"
          width="220"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="price"
          label="单价（元）"
          width="220"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="num"
          label="数量（千克，个）"
          width="220"
          align="center"
        >
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
              >编辑</el-button
            >
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
  
  <script>
export default {
  data () {
    return {
      dialogFormVisible: false,
      dialogFormVisible2: false,
      Userform: {
        _id:'',
        name: '',
        class: '',
        price: '',
        num: ''
      },
      input2: '',
      tableDate: [],
      table: {},
      oldData: ''
    }
  },
  created () {
    this.myDingdan()
  },
  methods: {
    // 请求订单数据
    myDingdan () {
      const item = JSON.parse(sessionStorage.getItem('user'))
      const that = this
      this.$http({
        method: 'POST',
        url: '/lk/lk/userDingdan',
        data: {
          person: item.username
        }
      }).then(function (response) {
        that.tableDate = response.data.data
        console.log(that.tableDate);
      })
    },
    // 请求查询的数据
    myCheck () {
      if (this.input2 == '') {
        this.Click()
      }
    },
    // 点击搜索后，显示要搜索的数据
    Click () {
      const item = JSON.parse(sessionStorage.getItem('user'))
      const that = this
      this.$http({
        method: 'POST',
        url: '/lk/lk/userCheck',
        data: {
          name: that.input2,
          person: item.username
        }
      }).then(function (response) {
        that.tableDate = response.data.data
        console.log(that.tableDate);
      })
    },
    // 点击添加订单时，要获取的数据
    check (form) {
      console.log(form);
      const item = JSON.parse(sessionStorage.getItem('user'))
      const that = this
      this.$http({
        method: 'POST',
        url: '/lk/lk/userAdd',
        data: {
          name: form.name,
          class: form.class,
          price: form.price,
          num: form.num,
          person: item.username
        }
      }).then(function (response) {
        if (response.data.status == 0) {
          that.$message({
            message: '创建订单成功',
            type: 'success'
          })
          that.tableDate = response.data.data
          that.dialogFormVisible = false
          // location.reload()
        } else if (response.data.status == 1) {
          that.$message({
            message: response.data.message,
            type: 'info'
          })
          // that.dialogFormVisible = false
        }

      })

    },
    // 用于修改表单数据
    handleEdit (index, row) {
      this.dialogFormVisible2 = true
      // 在表单中显示要修改的数据
      this.table = row
    },
    // 用于修改表单数据
    checked (form) {
      console.log(form);
      this.$http({
        method: 'POST',
        url: '/lk/lk/userRevise',
        data: {
          id: form._id,
          name: form.name,
          class: form.class,
          price: form.price,
          num: form.num,
        }
      }).then(function (response) { })
      this.dialogFormVisible2 = false
    },
    // 用于删除该行数据
    handleDelete (index, row) {
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const that = this
        this.$http({
          method: 'POST',
          url: '/lk/lk/userDelete',
          data: {
            id: row._id,
          }
        }).then(function (response) {
          that.tableDate.splice(index, 1)
        })
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
        location.reload()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    }
  }
}
  </script>
  
  <style lang="less" scoped>
.top {
  width: 400px;
  float: left;
  .el-input {
    width: 300px;
    margin-bottom: 20px;
  }
  .el-button {
    height: 39px;
  }
}
.Dingdan {
  #add {
    float: right;
  }
}
</style>